<template>
<div class="shopping">
     <div class="header">
       <div class="center-left">
           <img src="./img/shopping.png" alt="">
       </div>
        <div class="center-left-span">
           <span>购物车可领优惠券</span>
       </div>
      <button class="btn">
        领劵
        <!-- 向上箭头 -->
        <i class="icon-iconfonti2-copy-copy-copy-copy"></i>
        <!-- 向下箭头 -->
        <i class="icon-iconfonti2-copy-copy-copy-copy1"></i>
      </button>
   </div>  
   <div class="center">
     <img src="./img/shopping-logo.png" alt="">
     <div class="box1">购物车还是空滴</div>
     <div class="box2">
       <button>继续逛</button>
      </div>
   </div> 
</div>

</template>

<script>
// 引入Swiper的js和css
import Swiper from 'swiper'
import "swiper/css/swiper.min.css"
export default {
  mounted(){
    //   使用swiper
      new Swiper(".mySwiper", {
        slidesPerView: 3,
        // spaceBetween: 30,
        // slidesPerGroup: 3,
        // loop: true,
        // loopFillGroupWithBlank: true,
        // 小圆点
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        // 左右箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        // 自动轮播
        // autoplay:true,
        // 无缝轮播
        loop:true
      });
  }
}
</script>

<style>
.shopping{
    width:1519px;
    height:1221px;
    border:1px solid black;
    /* background-color: blanchedalmond; */
}
/* 标题栏 */
.header{
  display: flex;
    width:1068px;
    height:40px;
    margin-top:10px;
    margin-left:201px;
    padding:0 0 0 22px;
    background-color: #fff;
    border:1px solid #DDD; 
}
.header .center-left img{
  width:30px;
  height:24px;
   margin-top:10px;
   margin-left:-5px;
}
.header  .center-left-span {
  display: block;
   margin-top:10px;
   font-size:14px;
   /* background-color: #E36844; */
   padding:0 825px 0 20px;
}
.header .btn{
   width:88px;
   height:40px;
   padding:0 36px;
   background-color: #E36844;;
   margin-right:-1000px;
}
.header .btn span{
  font-size:12px;
} 

/* 购物车logo */
 body{text-align:center} 
.center{
       width:1090px;
       height:40px;
       margin:10px 0 0;
       border:1px solid #DDDDDD;
       background-color: #fff;
}
.center .center-left-span{
       font-size:14px;
}
.center{
    width:1090px;
    height:696px;
    line-height:696px;
    text-align:center;
    margin-top:10px;
    margin-left:201px;
    border:1px solid #DDDDDD; 
}
.center img{
  width:180px;
  height:180px;
}
.center .box1{
  margin-top:-665px;
  font-size: 16px;
  color:#999999;
}
.center .box2{
   margin-top:-650px;
}
.center button{
   width:100px;
  height:40px;
  color:#B4A078;
  font-size:16px;
  border-color: #B4A078;
  background-color: #F5F3EF;
}




</style>